<template>
  <view class="wrap" v-show="showWrap">
    <view class="custom_header">
      <text class="logo_title">爬记</text>
    </view>
    <view class="no_record" v-if="!recordList.length">
      <view class="start_record_title">开始记录吧</view>
      <view class="start_record_box" @click="addTurtle">
        <image class="add_img" src="../../static/record/add.png" mode="" />
      </view>
    </view>
    <view class="record_list" v-else>
      <view
        class="record_item"
        v-for="item in recordList"
        :key="item._id"
        @click="toRecordList(item)"
      >
        <view class="record_box">
          <view v-if="showCut" class="overlay">
            <span class="minus">-</span>
          </view>
          <image
            class="record_img"
            :src="item.turtle_url ? item.turtle_url : '../../static/avatar.png'"
            mode="aspectFill"
          />
        </view>
        <view class="record_name">
          {{ item.turtle_name }}
        </view>
      </view>
    </view>
    <view class="suspension_box" v-if="recordList.length">
      <view class="cancel_bot" v-if="showCut" @click="cutTurtle">
        <span class="cancel_text">取消</span>
      </view>
      <view v-else>
        <view class="record_item add_item" @click="addTurtle">
          <image
            class="add_img"
            src="../../static/record/add.png"
            mode="aspectFit"
          />
        </view>
        <view class="record_item add_item" @click="cutTurtle">
          <image
            class="add_img"
            src="../../static/record/add_gray.png"
            mode="aspectFit"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {  onShow } from '@dcloudio/uni-app';
const recordList = ref([]);
const alreadyGet = ref(false);
const showCut = ref(false);
const showWrap = ref(false);

const toRecordList = (item) => {
  if (showCut.value) {
    uni.showModal({
      title: `删除记录`,
      content: `您确定删除${item.turtle_name}及所有记录吗`,
      showCancel: true,
      success: (res) => {
        if (res.confirm) {
          uniCloud.callFunction({
            name: 'removeOfTurtle',
            data: {
              _id: item._id,
            },
            success(res) {
              clearTheRecord(item);
              getListData();
              uni.showToast({
                duration: 2000,
                icon: 'success',
                title: '删除成功',
              });
              showCut.value = false;
            },
            fail(e) {
              console.log(e);
            },
          });
        } else {
          showCut.value = false;
        }
      },
    });
  } else {
    uni.navigateTo({
      url: `/pages/recordPages/recordList?id=${item._id}`,
    });
  }
};

const clearTheRecord = (item) => {
  uniCloud.callFunction({
    name: 'removeTheAllRecord',
    data: {
      _id: item._id,
    },
    success(res) {
      console.log('removeTheAllRecord-res', res);
    },
    fail(e) {
      console.log(e);
    },
  });
};

const addTurtle = () => {
  uni.navigateTo({
    url: `/pages/recordPages/addTurtle`,
  });
};

const cutTurtle = () => {
  showCut.value = !showCut.value;
};

const getListData = () => {
  uniCloud.callFunction({
    name: 'getTurtleRecordList',
    data: {
      user_id: uni.getStorageSync('userId'),
    },
    success(res) {
      const result = res.result;
      if (result.code === 200) {
        showWrap.value = true;
        recordList.value = result.data.data;
        alreadyGet.value = true;
      }
    },
  });
};

onShow(() => {
  const userId = uni.getStorageSync('userId')
  if(!userId) {
    uni.switchTab({
      url: '/pages/minePages/mine'
    })
    return
  }
  getListData();
});
</script>

<style lang="scss" scoped>
.custom_header {
  width: 100%;
  height: 200rpx;
  background: #3d836d;
  color: #fff;
  display: flex;
  align-items: center;
  .logo_title {
    padding-left: 22rpx;
    padding-top: 38rpx;
    font-size: 42rpx;
  }
}
.wrap {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  .no_record {
    width: 100%;
    text-align: center;
    padding-top: 100rpx;
    .start_record_title {
      font-size: 36rpx;
    }
    .start_record_box {
      padding-top: 66rpx;
      .add_img {
        width: 180rpx;
        height: 180rpx;
        animation: myBreath 2s linear infinite;
      }
      @keyframes myBreath {
        0% {
          transform: scale(0.88);
        }
        50% {
          transform: scale(100%);
        }
        100% {
          transform: scale(0.88);
        }
      }
    }
  }

  .record_list {
    margin-top: -26rpx;
    border-radius: 32rpx 32rpx 0 0;
    background: #fff;
  }

  .record_list,
  .suspension_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 38rpx 0 38rpx 35rpx;
    box-sizing: border-box;
    .add_item {
      padding-top: 30rpx;
      height: 146rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* #ifdef H5 */
      width: 140rpx;
      padding-top: 0;
      /* #endif */
      .add_img {
        width: 146rpx;
        height: 146rpx;
        border-radius: 0;
        /* #ifdef H5 */
        width: 100rpx;
        height: 100rpx;
        /* #endif */
      }
    }
    .record_item {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-bottom: 35rpx;
      position: relative;
      .record_box {
        position: relative;
      }
      .record_img {
        flex-shrink: 0;
        width: 146rpx;
        height: 146rpx;
        border-radius: 50%;
        margin-bottom: 20rpx;
        background: #eee;
        border: 8rpx dashed #3d836d;
      }
      .record_name {
        font-size: 28rpx;
      }
      .overlay {
        width: 158rpx;
        height: 158rpx;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9;
      }
      .minus {
        color: white;
        font-size: 48px;
        padding-bottom: 16rpx;
      }
    }
  }
  .suspension_box {
    width: auto;
    position: fixed;
    bottom: 100rpx;
    right: 30rpx;
    display: flex;
    flex-direction: column;
    .cancel_bot {
      position: fixed;
      left: 0;
      bottom: 0;
      background: #3d836d;
      width: 100%;
      height: 120rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .cancel_text {
        color: #fff;
        font-size: 36rpx;
      }
    }
    .add_item {
      padding-bottom: 0;
      .add_img {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }
}
</style>
